import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import { NavLink } from 'react-router-dom';

import ContentLayout from '@/component/common/ContentLayout';

import style from './style.scss';

import ApiHelper from '@/store/ApiHelper';
import { stage_apply_status, stage_apply } from '@/constants/ApiTypes';

import MModal from '@/component/common/MModal';

const mConfirm = MModal.confirm;

@observer class FinanceApply extends Component {
    state = {
        loading: true,
        applyStatus: 0
    };
    componentDidMount() {
        this._isMounted = true;
        this.getStageApplyStatus();
    }
    getStageApplyStatus  = async () => {
        const result = await this.stageApplyStatus();
        if (result.status) {
            this.setState({ applyStatus: result.info });
        }
        this.setState({ loading: false });
    };
    componentWillUnmount() {
        this._isMounted = false;
    }
    //分期产品申请状态查询
    stageApplyStatus = () => {
        return ApiHelper.requestPost(stage_apply_status);
    };
    //分期产品申请
    stageApply = () => {
        return ApiHelper.requestPost(stage_apply);
    };
    clickApply = () => {
        mConfirm({
            title: '确定要申请住家分期吗',
            titleStyle: { fontSize: 16 },
            width: 300,
            height: 177,
            content: '',
            okText: '是',
            cancelText: '否',
            okClassName: 'primary-btn-ok',
            cancelClassName: 'primary-btn-cancel',
            showTopClose: false,
            onOk: async () => {
                //申请分期
                const result = await this.stageApply();
                if (result.status) {
                    MModal.success({ title: '操作成功', content: '申请成功', duration: 1.5 });
                    await this.getStageApplyStatus();
                } else {
                    MModal.success({ title: '操作失败', content: result.info });
                }
            },
            onCancel() {}
        });
    };
    render() {
        let processType = this.state.applyStatus + 1;
        let ele;
        if (processType == 1) {
            ele = <a className={style['apply-btn']} href="javascript:void(0);" onClick={this.clickApply}>立即申请</a>
        }
        if (processType == 2) {
            ele = <div className={style['apply-process']}><img src="/static/alliance2/image/finance/process1.png" /></div>
        }
        if (processType == 3) {
            ele = <div className={style['apply-process']}><img src="/static/alliance2/image/finance/process2.png" /></div>
        }
        return (
            <ContentLayout navTitle="金融" loading={this.state.loading}>
                <div className={style['finance-wrap']}>
                    <div className={style['banner-wrap']}>
                        <h1 className={style['banner-title']}>住家分期</h1>
                        <p>住家分期是住家租房为住家联盟成员提供的一项房租分期产品，租客享受月付房租，住家联盟成员的管家房一次性拿到全年房租，住家租房免费安装住家智能锁，免去您催租及资金不足的烦恼。</p>
                        {ele}
                        <div className={style['banner-down-step']} />
                    </div>
                    <div className={style['footer-wrap']}>
                        <p>住家金融致力于更好的服务于住家联盟成员，为联盟成员提供集中式公寓、分散式公寓、城市民宿、酒店等租赁市场的全方位金融支持。</p>
                        <div className={style['footer-hr']}/>
                        <span>更多金融支持请致电18758215646</span>
                    </div>
                </div>
            </ContentLayout>
        );
    }
}

export default FinanceApply;